<!DOCTYPE html>
<html style="font-size: 312.5%;">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>搜索</title>
		<link rel="stylesheet" type="text/css" href="css/m.css" />
		<style type="text/css">
			header {
				position: absolute;
				top: 0;
				left: 0;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				max-width: 100%;
				height: .92rem;
				line-height: .92rem;
				background: #fff;
				z-index: 1;
			}
			
			header>img {
				width: .5rem;
				height: .5rem;
				margin-left: .25rem;
				margin-top: .15rem;
			}
			
			header>div {
				flex: 1;
				margin-right: .32rem;
				display: inline-block;
				height: .66rem;
				margin-left: .3rem;
				line-height: .66rem;
				background: #f7f8fa;
				border-radius: .09rem;
				opacity: .9;
				position: relative;
				margin-top: .1rem;
			}
			
			header>div>img {
				width: .40rem;
				vertical-align: middle;
			}
			
			header>div>div {
				position: absolute;
				bottom: .2rem;
				left: .7rem;
				display: inline-block;
				width: 189px;
				height: 24px;
				border: 0;
				color: #b2b2b2;
				font-size: .3rem;
				font-weight: 400;
				background: #f7f8fa;
				opacity: 0;
				transition-duration: 500ms;
				z-index: 5;
			}
			
			header>div>div.active {
				opacity: 1;
			}
			
			.searchbox {
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: #fff;
				display: none;
				z-index: 2;
			}
			
			header>span {
				width: 1.04rem;
				color: #333;
				font-weight: 500;
				font-size: .3rem;
			}
			.recmmend{
				margin-top: .92rem;
				padding: .62rem .24rem 0;
			}
			.title{
				color: #999;
			    font-weight: 400;
			    font-size: .26rem;				
			}
			.body{
			    margin-top: .36rem;
    			overflow: hidden;
			}
			.body>span{
			    float: left;
			    margin-right: .16rem;
			    margin-bottom: .16rem;
			    padding: .04rem .2rem;
			    font-weight: 400;
			    font-size: .26rem;
			    line-height: .62rem;
			    border-radius: .1rem;
		        color: #666;
    			background: #f7f8fa;
			}
			.body>span:nth-of-type(even){
				color: #fff;
				background: linear-gradient(228deg,#ff4343,#ff8243);
			}
		</style>
	</head>

	<body>
		<header>
			<img src="img/Q/back.png" />
			<div class="searching">
				<img src="img/Q/search.svg" />
				<div class="active">A11S</div>
				<div>OPPO WATCH2</div>
				<div>OPPO WATCH2</div>
				<div>OPPO WATCH2</div>
			</div>
			<span>搜索</span>
		</header>
		<div class="recmmend">
			<div class="title">
				热门推荐
			</div>
			<div class="body">
				<span>A11S</span>
				<span>OPPO K9 Pro</span>
				<span>OPPO Reno6</span>
				<span>真我GT Neo2</span>
				<span>OnePlus 9R</span>
				<span>OPPO Watch Free</span>
			</div>
		</div>


	<script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$("img:first-of-type").click(()=>{
			$(location).attr('href', 'index.html');
			$(window).attr('location','index.html');
			$(location).prop('href', 'index.html');
		})
	</script>
	</body>

</html>